{% extends 'base.html' %}
{% load static %}

{% block content %}

{% if rating_sheet %}
	<h1>Ratings for Interview Round: {{ rating_sheet.round_name.name }}</h1>
  <h3>Comments : {{ rating_sheet.comment }}</h3>
	<div class="panel panel-default">
        <table class="table">
        	<tr>
                <th>Title</th>
                <th>Comment</th>
                <th>Points</th>
            </tr>
        {% for aspect in aspects %}
        <tr>
            <td>{{ aspect.name }} </td>
            <td>{{ aspect.comment }}</td>
            <td>{{ aspect.points }} </td>
        </tr>
        {% endfor %}
    	</table>



    </div>


    <div id="container"></div>
    <button class="btn btn-default" id="button">Flip Y Axis</button>
    <hr>

    <script src="{% static 'js/jquery.js' %}"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>

    <script type="text/javascript">
    var chart = new Highcharts.Chart({
      chart: {
          renderTo: 'container'
      },
      title: {
          text: 'Ratings Graph'
      },
      yAxis: {
        reversed: true,
    },
      xAxis: {
          categories: {{ aspects_name|safe }},
      },
      series: [{
          name: 'Ratings Recieved',
          data: {{ aspects_points }},
          color: 'blue',

      }, {
      name: 'Ratings Expected',
          data: {{ aspects_exp_points }},
          color: 'green',
        }]

      });


var reversed = chart.options.yAxis;
  // the button action
  $('#button').click(function () {

     chart.yAxis[0].update({
            reversed: !reversed
        });
     reversed = !reversed;
     });

</script>
{% endif %}

{% endblock %}
